<template>
	<!-- 排水 -->
	<div class="flex-col h100">
		<my-box title="总览" class="top"> <List :data="data" /></my-box>
		<my-box class="f1 h0 m-t-10" title="水仓状态">
			<my-table
				:columns="[
					{
						label: '水仓名',
						prop: 'waterSumpName',
						width: '110'
					},
					{
						label: '主水仓',
						prop: 'mainWaterSump'
					},
					{
						label: '副水舱',
						prop: 'viceWaterSump'
					},
					{
						label: '主水仓水位',
						prop: 'mainWaterLevel',
						width: '100'
					},
					{
						label: '副水仓水位',
						prop: 'viceWaterLevel',
						width: '100'
					}
				]"
				:data="data2"
			/>
		</my-box>
		<my-box class="f1 h0 m-t-10" title="排水泵状态">
			<my-table
				height="200"
				:columns="[
					{
						label: '水泵房',
						prop: 'waterSumpName',
						width: '110'
					},
					{
						label: '1#水泵',
						prop: 'watePumpStatte1'
					},
					{
						label: '2#泵',
						prop: 'watePumpStatte2'
					},
					{
						label: '3#水泵',
						prop: 'watePumpStatte3'
					},
					{
						label: '4#水泵',
						prop: 'watePumpStatte4'
					},
					{
						label: '5#水泵',
						prop: 'watePumpStatte5'
					}
				]"
				:data="data3"
			>
				<template #watePumpStatte1="{ row }">
					<span class="st" :style="{ backgroundColor: row.watePumpStatte1 == 0 ? '#3AB973' : '#E76060' }"></span
				></template>
				<template #watePumpStatte2="{ row }">
					<span class="st" :style="{ backgroundColor: row.watePumpStatte2 == 0 ? '#3AB973' : '#E76060' }"></span
				></template>
				<template #watePumpStatte3="{ row }">
					<span class="st" :style="{ backgroundColor: row.watePumpStatte3 == 0 ? '#3AB973' : '#E76060' }"></span
				></template>
				<template #watePumpStatte4="{ row }">
					<span class="st" :style="{ backgroundColor: row.watePumpStatte4 == 0 ? '#3AB973' : '#E76060' }"></span
				></template>
				<template #watePumpStatte5="{ row }">
					<span class="st" :style="{ backgroundColor: row.watePumpStatte5 == 0 ? '#3AB973' : '#E76060' }"></span
				></template>
			</my-table>
		</my-box>
	</div>
</template>

<script setup>
import { drainageOverview, waterSumpState, waterPump } from '@a/home'
import List from './component/List.vue'

// 总览
let data = ref([
	{ name: '正常涌水量', subname: 'Water inrush', value: 178, unit: 'm³/h', icon: 'zhengchangyongshui' },
	{ name: '最大涌水量', subname: 'Maximum water inflow', value: 78, unit: 'm³/h', icon: 'zuidayongshuiliang' },
	{ name: '日累计排水量', subname: 'Daily drainage', value: 78, unit: 'm³/h', icon: 'guntongwendu' },
	{ name: '水泵房数量', subname: 'Water Pump Room', value: 22, unit: '个', icon: 'shuibengfang' }
])
drainageOverview().then((res) => {
	data.value[0].value = res.data.waterInrush
	data.value[1].value = res.data.maxWaterInrush
	data.value[2].value = res.data.dailyDrainage
	data.value[3].value = res.data.waterPumpRoomCount
})
// 水仓状态
let data2 = ref([])
waterSumpState().then((res) => {
	data2.value = res.data
})
// 排水泵状态
let data3 = ref([])
waterPump().then((res) => {
	data3.value = res.data
})
</script>

<style lang="scss" scoped>
.all {
	.item {
		height: 48px;
		border-radius: 2px;
		background: #030f27;
		box-sizing: border-box;
		border: 1px solid rgba(76, 107, 209, 0.5);
		box-shadow: inset 0px 0px 12px 0px #3468d8;
		&:not(:first-child) {
			margin-top: 10px;
		}
	}
}
.length {
	color: #397bfd;
	font-size: 14px;
	font-weight: bold;
	margin-left: 4px;
}
:deep(.el-progress__text) {
	color: #fff;
}
.st {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
</style>
